
<template>
    <div class="add">
            <!-- 在表单控件或者组件上创建双向绑定 -->
            编号:<input type="text" v-model="code">
            品牌名称:<input type="text" v-model="title">
            <br>
            产品图片地址:<input type="text" v-model="pic">

            价格:<input type="text" v-model="price">
            <input type="button" value="添加" @click="add">
        </div>

 
</template>

<script>
export default{
    data(){
        return{
            title:'',
            code:'',
            pic:'',
            price:'',
        }
    },
    methods: {
        add(){
            //空值不能添加进来
            if(!this.code||!this.price||!this.pic||!this.title){
                return
            }

            //核心思想，使用push方法 往数组中添加数据，那么视图自然就会更新 
            //声明一个要添加的对象
          
            let obj ={
                title:this.title,
                pic: this.pic,
                code: this.code,
                price: this.price,
                quantity: 1,
                id: Math.random().toString(32).substring(2)
            }

            this.$emit('add',obj)
        },
    }
}
</script>

